<template>
  <RouterView></RouterView>
  <!-- <RouterLink to="/home">首页</RouterLink>
  <br>
  <RouterLink to="/about">关于</RouterLink>

  <input type="button" value="跳转到用户页面" @click="btnTo()"> -->
  <!-- <Shopping></Shopping>
  <Listen></Listen>
  <PropsParent></PropsParent>
  <Question></Question>
  <TestChild></TestChild>
  <Test></Test> -->
  <!-- <input type="text" v-model="search">
  <ul id="list">
    <li v-for="item in listItems">
      {{ item.name }}
    </li>
  </ul> -->
  <!-- 格式化日期 -->
  <!-- <input type="text" v-model="date" placeholder="输入日期(YYYY-MM-DD)">
  <br>
  格式化日期: {{ year }}年{{ month }}月{{ day }}日 -->
  <!-- 动态样式 -->
  <!-- <input type="text" placeholder="请输入背景颜色(#000000)" v-model="inputColor">
  <div :style="{ backgroundColor: obj.backgroundColor }" style="width: 1000px;height: 30px;"></div> -->
  <!-- 综合练习：用户信息表单 -->
  <!-- <form>
    用户名:<input type="text" v-model="username" placeholder="用户名">
    <br>
    年龄:<input type="text" v-model="age">
    <br>
    性别:
    <input type="radio" name="sex" v-model="gender" value="男">男
    <input type="radio" name="sex" v-model="gender" value="女">女
    <h1>用户信息摘要</h1>
    <br>
    用户名：{{ name }}
    <br>
    年龄：{{ uage }}岁
    <br>
    性别:{{ gender }}
  </form> -->
</template>
<script setup>
// import Test from './components/Test.vue';
// import TestChild from './components/TestChild.vue';
// import Question from './components/Question.vue'
// import PropsParent from './components/PropsParent.vue';
// import Listen from './components/Listen.vue'
// import Shopping from './components/Shopping.vue';
// import { RouterLink, RouterView } from 'vue-router';
// import { ref, computed } from 'vue';
// let search = ref('')
// const items = ref([
//   { name: 'Alice' },
//   { name: 'Bob' },
//   { name: 'Charlie' },
//   { name: 'Davild' }
// ]);

// var listItems = computed(() => {
//   if (search.value === '') {
//     return items.value
//   } else {
//     return items.value.filter(item => {
//       if (item.name.toLowerCase().includes(search.value.toLowerCase())) {
//         return item.name
//       }
//     })
//   }
// })

/**
 * 格式化日期
 */

// import { ref, computed } from 'vue';
// let date = ref('')
// let year = ref('')
// let month = ref('')
// let day = ref('')
// year.value = computed(() => {
//   return date.value.split("-")[0]
// })
// month.value = computed(() => {
//   return date.value.split("-")[1]
// })
// day.value = computed(() => {
//   return date.value.split("-")[2]
// })

/**
 * 动态样式
 */
{
  // import { ref, computed } from 'vue';
  // let inputColor = ref('')
  // let obj = computed(() => {
  //   return {
  //     backgroundColor: inputColor.value || ''
  //   }
  // })
}
import { useRouter } from 'vue-router';
let xx = useRouter()
function btnTo() {
  let arr = [1, 2, 3, 4, 5]
  let number = Math.floor(Math.random() * arr.length) + 1
  xx.push(`/user/${number}`)
}
</script>